<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from './echarts.mixins'

  // 加载echarts，注意引入文件的路径
  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        name1: ['','位移值(mm)','','位移值(mm)','雨量值(mm)','水位值(mm)','','','角度值(°)','拉力值(kg)',],
        name2: ['','位移值','','位移值','雨量值','水位值','','','角度值','拉力值',],
        //y轴名称列表
        dataNameList: [],
        //线名称列表
        lineNameList: [],
        //数据列表
        dataList: [],
        yAxis: [],
        series: [],
        charts: '',
        firstList: [],
        secondList: [],
        thirdList: [],
        fourthList: [],
        shiftTime: [],
        maxNum: '',
        minNum: '',
        // 监测点名称
        monitorName: '',
      }
    },
    computed: {
      options() {
        return {
          textStyle: {
            fontSize: 12,
            // color: "#ffffff",
          },
          // color:['#1990FE','#808bc6'],
          title: {
            text: this.monitorName + '综合曲线图',
            x: 'center',
            align: 'right',
            textStyle: {
              fontWeight: "normal",
              color: "white", //标题颜色
            },
          },
          grid: {
            left: '110px',
            right: '100px',
            bottom: '70px'
          },
          legend: {
            data: this.lineNameList,
            y: 'top',
            //orient: 'vertical',
            padding: [30, 0, 0, 0],
            textStyle: { //图例文字的样式
              // color: '#fff',
              fontSize: 16
            },

          },
          toolbox: {
            right: '0',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: function (params, ticket, callback) {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (i === 0) {
                  let date = new Date(data.name);
                  contentArr.push(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate())
                }
                contentArr.push(data.marker + data.seriesName + '：' + data.value)
              }
              return contentArr.join('<br/>')
            }
          },
          dataZoom: [{
            show: true,
            realtime: true,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
            {
              type: 'inside',
              realtime: true
            }
          ],
          xAxis: {
            type: 'category',
            boundaryGap: false,
            min: 0,
            axisLine: {
              onZero: false
            },axisLabel: {
              textStyle: {
                color: "white",
                //字体自适应
              },
            },
            data: this.shiftTime,
            axisLabel:{
              formatter: function (value, index) {
                // 格式化成月/日，只在第一个刻度显示年份
                let date = new Date(value);
                let texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()];
                return texts.join('-');
              }
            }
          },
          yAxis: this.yAxis,
          series: this.series,
        }
      }
    },
    methods: {
      updateEchart(list, monitorName) {
        this.monitorName = monitorName
        this.dataNameList = []
        this.lineNameList = []
        this.dataList = []
        this.yAxis = [];
        this.series = [];
        for(let i=0;i<list.length;i++) {
          if (i === 0) {
            this.shiftTime = list[i].dataList.map(x => Format(new Date(x.createTime)))
          }
          if (list[i].monitorType === 9) {
            this.dataNameList = [...this.dataNameList, this.name1[3]]
            this.lineNameList = [...this.lineNameList, this.name2[3]]
            this.dataNameList = [...this.dataNameList, this.name1[list[i].monitorType]]
            this.lineNameList = [...this.lineNameList, this.name2[list[i].monitorType]]
            this.dataList = [...this.dataList, list[i].dataList.map(x => {if(x.avgValue!=null)return x.avgValue.toFixed(3)})]
            this.dataList = [...this.dataList, list[i].dataList.map(x => {if(x.avgValue2!=null)return x.avgValue2.toFixed(3)})]
          } else {
            this.dataNameList = [...this.dataNameList, this.name1[list[i].monitorType]]
            this.lineNameList = [...this.lineNameList, this.name2[list[i].monitorType]]
            this.dataList = [...this.dataList, list[i].dataList.map(x => {if(x.avgValue!=null)return x.avgValue.toFixed(3)})]
            // this.dataList = [...this.dataList, list[i].dataList.map(x => x.avgValue)]
          }
        }
        for(let i=0;i<this.dataNameList.length;i++){
          let seriesItem = {name: this.lineNameList[i],
            type: 'line',

            smooth: true,
            symbol: 'diamond',
            symbolSize: 4,
            yAxisIndex:i,
            data: this.dataList[i]}
          let yAxisItem = {
            name: this.dataNameList[i],
            type: 'value',
            axisLine: { // y轴
              show: true
            },
            axisLabel: {
              textStyle: {
                // color: "white",
                //字体自适应
              },
            },}
          if(this.lineNameList[i]==='雨量值'){
            seriesItem = {...seriesItem,
              itemStyle : {
                normal : {
                  color:'#95CE7A',
                  lineStyle:{
                    color:'#95CE7A'
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: '#AED999' //改变区域颜色
                }
              }}
            yAxisItem = {...yAxisItem,inverse : true,nameLocation:'start'}
          }else if(this.lineNameList[i]==='水位值') {
            seriesItem = {
              ...seriesItem,
              itemStyle : {
                normal : {
                  color:'#5470C6',
                  lineStyle:{
                    color:'#5470C6'
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: '#7E95D0' //改变区域颜色
                }
              }
            }
          }
          switch(i){
            case 0:
              yAxisItem = {...yAxisItem,position : 'left',}
              break
            case 1:
              yAxisItem = {...yAxisItem,position : 'right',}
              break
            case 2:
              yAxisItem = {...yAxisItem,position : 'left', offset: 70,}
              break
            case 3:
              yAxisItem = {...yAxisItem,position : 'right', offset: 70,}
              break
          }
          this.yAxis.push(yAxisItem)
          this.series.push(seriesItem)
        }
        this.charts.setOption(this.options, true)
      },
    },
  }
</script>
